<template>
	<view class="menu">
		<!-- #ifdef MP-WEIXIN -->
		<view class="header-phone-stauts-show"></view>
		<!-- #endif -->
		<!-- 标题栏 -->
		<!-- 标题栏 -->
		<cl-topbar title="预点单成功" background-color='#f7f7f7' :border='false'></cl-topbar>
		<!-- 交互界面 -->
		<!-- 交互界面 -->
		<view class="interaction">
			<!-- 标题 -->
			<view class="title">
				预点单成功
			</view>
			<!-- 商家 -->
			<view class="merchant">
				<view class="item">
					<image class="img" src="https://img.js.design/assets/smartFill/img409164da755928.jpg"
						mode="aspectFill"></image>
				</view>
				<view class="item info">
					<view class="info-title">
						田季麻辣烫 <cl-icon :size='32' name="cl-icon-arrow-right"></cl-icon>
					</view>
					<view class="info-content">
						山东外国语职业技术大学店
					</view>
				</view>
				<view class="item phone">
					<image class="phone-img" src="/static/images/pages/place/电话@2x.webp" mode=""></image>
					<span class='text'>电话</span>
				</view>

			</view>
			<!-- 底部按钮 -->
			<view class="btns">
				<view class="left-btn btn">
					继续加餐
				</view>
				<view class="right-btn btn">
					已落座扫码下单
				</view>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="advance-list-order">
			<template v-if='advanceOrderList.length>0'>
				<view class="header-list" :style="{height:advanceOrderListHeight}">
					<cl-scroller ref="advance" @up="onUp" @down="onDown" :show-scrollbar='false'
						:show-back-top-button='false' :refresher-enabled='false'>
						<cl-loading-mask :loading="firstLoading" text="获取订单中">
							<OrderList :orderInfoList="advanceOrderList"></OrderList>
							<!-- <view style="width: 100%;height: 100rpx;">
								<cl-loadmore :loading="continueLoading" :divider="false" ></cl-loadmore>
							</view> -->
						</cl-loading-mask>
					</cl-scroller>
				</view>
				<view class="bottom-total">
					共计3件
				</view>
			</template>
			<template v-else>
				<view style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">
					小主，请求错误qwq
				</view>
			</template>
		</view>

		<!-- 订单金额 -->
		<view class="advance-list-price">
			<view class="ul" :style="{height:advancePriceHeight}">
				<view class='item-orice'>
					<span class='project'>会员Lv1</span>
					<span class='tip'>9折优惠</span>
					<span class='price'>￥100000.00</span>
				</view>
				<view class='item-orice'>
					<span class='project'>会员Lv1</span>
					<span class='tip'>9折优惠</span>
					<span class='price'>￥100000.00</span>
				</view>
			</view>
			<view class="bottom">
				<span class='text'>合计:</span>
				<span class='total-price'>￥1200.00</span>
			</view>
		</view>

	</view>
</template>

<script>
	import OrderList from '@/components/OrderList/index.vue'
	export default {
		name: 'Menu',
		data() {
			return {
				firstLoading: true,
				continueLoading: false,
				continueFinish: false,
				advanceOrderList: [{
						imgSrc: 'http://127.0.0.1:5100/public/images/niu.webp',
						dish: '西冷牛排',
						degree: '[七分熟][孜然味]',
						quantity: '1',
						price: '129'
					},
					{
						imgSrc: 'http://127.0.0.1:5100/public/images/niu.webp',
						dish: '西冷牛排',
						degree: '[七分熟][孜然味]',
						quantity: '1',
						price: '129'
					},
					{
						imgSrc: 'http://127.0.0.1:5100/public/images/niu.webp',
						dish: '西冷牛排',
						degree: '[七分熟][孜然味]',
						quantity: '1',
						price: '129'
					},
					{
						imgSrc: 'http://127.0.0.1:5100/public/images/niu.webp',
						dish: '西冷牛排',
						degree: '[七分熟][孜然味]',
						quantity: '1',
						price: '129'
					},
					{
						imgSrc: 'http://127.0.0.1:5100/public/images/niu.webp',
						dish: '西冷牛排',
						degree: '[七分熟][孜然味]',
						quantity: '1',
						price: '129'
					},
					{
						imgSrc: 'http://127.0.0.1:5100/public/images/niu.webp',
						dish: '西冷牛排',
						degree: '[七分熟][孜然味]',
						quantity: '1',
						price: '129'
					}
				],
				advancePriceList: [{
						project: '会员Lv1',
						tip: '9折优惠',
						Discounts: 100,
						type: 1, //1是减，0是加
					},
					{
						project: '优惠券',
						tip: '拉新15元抵扣券',
						Discounts: 15,
						type: 1, //1是减，0是加
					},
				]
			}
		},
		onLoad() {
			//引入指定字体
			uni.loadFontFace({
				family: 'you',
				source: 'url("/static/fonts/youshebiaotihei/YouSheBiaoTiHei-2.ttf")',
				success() {
					console.log('引入特殊字体成功')
				}
			});
			// #ifdef MP-WEIXIN
			uni.loadFontFace({
				global: true,
				family: 'siyuan',
				source: 'url("/static/fonts/siyuan/SourceHanSansCN-Medium.ttf")',
				success() {
					console.log('引入思源黑体成功')
				},
				fail(e) {
					console.log(e);
				}
			})
			// #endif
		},
		components: {
			OrderList
		},
		mounted() {
			setTimeout(() => {
				this.firstLoading = false
			}, 200)
		},
		methods: {
			onUp() {
				this.continueLoading = true;
				setTimeout(() => {
					this.continueLoading = false
				}, 2000)
			}
		},
		computed: {
			advanceOrderListHeight() {
				const number = this.advanceOrderList.length
				if (number === 0) {
					return '200rpx'
				} else if (number > 0 && number < 3) {
					return `${number * 200}rpx`
				}
				return '600rpx'
			},
			advancePriceHeight() {
				const number = this.advancePriceList.length
				if (number === 0) {
					return '60rpx'
				} else if (number > 0) {
					return `${number * 60}rpx`
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.menu {
		width: 100%;
		min-height: 100vh;
		background-color: $pages-background-color;

		//微信小程序独有的头部展示
		.header-phone-stauts-show {
			width: 100%;
			height: 40rpx;
			background-color: #f7f7f7;
		}

		// 交互界面
		.interaction {
			margin: 0 auto;
			margin-top: 32rpx;
			width: 700rpx;
			height: 420rpx;
			background-color: $white-notion;
			border-radius: 12rpx;
			box-shadow: 0px 2rpx 2rpx 0px $shadow-color;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			overflow: hidden;

			// 标题
			.title {
				position: relative;
				width: 100%;
				text-align: center;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 32rpx;
				font-weight: 500;
				letter-spacing: 1rpx;
				color: $main-text;
			}

			// 商家
			.merchant {
				position: relative;
				width: 100%;
				height: 180rpx;
				display: grid;
				grid-template-columns: 150rpx auto 150rpx;

				&::after {
					content: "";
					display: block;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 90%;
					height: 0;
					border-bottom: 0.5rpx dashed $list-content;
				}


				.item {
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.img {
						width: 108rpx;
						height: 108rpx;
						border-radius: 50%;
						box-shadow: 0px 4rpx 4rpx 0px $main-color;
						margin-right: 16rpx;
					}

					&.info {
						justify-content: center;
						align-items: flex-start;
						flex-direction: column;

						.info-title {
							font-size: 32rpx;
							font-weight: 500;
							margin-bottom: 12rpx;
						}

						.info-content {
							font-size: 24rpx;
							font-weight: 300;
						}
					}

					&.phone {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.phone-img {
							width: 48rpx;
							height: 48rpx;
						}

						.text {
							font-size: 24rpx;
							font-weight: 400;
						}
					}
				}

			}

			// 底部按钮
			.btns {
				flex: 1;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.btn {
					width: 290rpx;
					height: 100rpx;
					border-radius: 12rpx;
					border: 1px solid $main-color;
					box-shadow: 0px 0px 6rpx 0px $main-color;
					display: flex;
					align-items: center;
					justify-content: center;
					letter-spacing: 2rpx;
					font-size: 32rpx;
					font-weight: 500;

					&:first-child {
						margin-right: 42rpx;
					}

					&.left-btn {
						color: $main-color;
					}

					&.right-btn {
						color: $white-notion;
						background-color: $main-color;
					}
				}
			}
		}

		//订单信息
		.advance-list-order {
			margin: 0 auto;
			margin-top: 20rpx;
			width: 700rpx;
			min-height: 180rpx;
			border-radius: 12rpx;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			box-shadow: 0px 0rpx 4rpx 0px $shadow-color;
			background-color: $white-notion;

			.header-list {
				// height: calc(100% - 80rpx);
				width: 100%;
				position: relative;

				::-webkit-scrollbar {
					display: none;
				}
			}

			.bottom-total {
				position: relative;
				width: 100%;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-weight: 500;
				letter-spacing: 2rpx;
				color: #969696;
				box-shadow: 0 -1rpx 2rpx 0 $shadow-color;
			}
		}


		//订单金额
		.advance-list-price {
			box-sizing: border-box;
			margin: 20rpx auto;
			width: 700rpx;
			min-height: 220rpx;
			border-radius: 12rpx;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			box-shadow: 0px 0rpx 4rpx 0px $shadow-color;
			background-color: $white-notion;
			font-family: 'you';

			.ul {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;

				.item-orice {
					position: relative;
					width: 100%;
					height: 60rpx;
					display: grid;
					grid-template-columns: 150rpx auto 240rpx;
					padding-bottom: 6rpx;

					&::after {
						content: "";
						display: block;
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						width: 90%;
						height: 0;
						border-bottom: 1rpx dashed $shadow-color;
					}

					span {
						display: flex;
						align-items: flex-end;
						font-size: 28rpx;

						&.project {
							padding-left: 30rpx;
							color: #f9315b;
						}

						&.tip {
							font-size: 24rpx;
							color: $list-content;
							font-weight: 300;
						}

						&.price {
							font-size: 32rpx;
							color: #F86811;
						}
					}
				}
			}

			.bottom {
				width: 100%;
				height: 120rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding-right: 80rpx;

				.total-price {
					font-size: 40rpx;
					color: red;
				}

				.text {
					font-size: 32rpx;
					padding-top: 5rpx;
					margin-right: 10rpx;
					color: #F86811;
				}
			}
		}
	}
</style>
